<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="province">
</select>
<select id="city">
    <option value=''>请选择城市</option>
</select>
</body>
<script>
    //第一步把死的变成活的
    //要有活数据 去替换  死数据
    //活数据来源于  city.json中的province ["湖北","湖南","河南"]
    var pro = document.getElementById("province"); //获取select
    var citySelect = document.getElementById("city"); //获取省份
    //    pro.innerHTML = "<option value='湖北'>湖北</option><option value='湖北'>湖北</option><option value='湖北'>湖北</option>";
    //找数据
    var req = new XMLHttpRequest(); //建立请求
    req.open("get", "city.json", true); //打开地址
    req.onreadystatechange = function () { //设置监听
        if (req.readyState == 4 && req.status == 200) {
            var text = req.responseText;
            var list = JSON.parse(text);//找到了所有的集合
            var str = "<option value=''>选择省份</option>";
            for (var i = 0; i < list.length; i++) {
                var p = list[i]["province"];//找到省份
// alert(p);
                str += " <option value=" + p + ">" + p + "</option>"; //循环拼接字符串
            }
            pro.innerHTML = str;
        }
    }
    req.send();//发送

    pro.onchange = function () { //下拉选框改变事件
        var p = this.value; //找到选择的省份    然后根据省份去找城市
        if (p != "") { //判断是否选择的为省份
            var req = new XMLHttpRequest();
            req.open("get", "city.json", true);
            req.send();
            req.onreadystatechange = function () {
                if (req.readyState == 4 && req.status == 200) {
                    var text = req.responseText;
                    var list = JSON.parse(text);
                    for (var i = 0; i < list.length; i++) {
                        var obj = list[i];
                        var pro = obj["province"];  //省份是一个字符串
                        var city = obj["city"];//城市是一个集合 []
//                        "city": [
//                            "武汉",
//                            "荆州",
//                            "宜昌",
//                            "襄阳"
//                        ]
                        if (p == pro) { //找到集中的该省份 然后返回该省份下面的所有城市
                            //然后把城市跟省份一样  再循环的遍历出来
                            var str = "";
                            for (var j = 0; j < city.length; j++) {
                                str += " <option value=" + city[j] + ">" + city[j] + "</option>"; //循环拼接字符串
                            }
                            citySelect.innerHTML = str;
                            break;//因为省份是唯一  所有找到之后就可以不找了
                        }
                    }
                }
            }
        } else {
            citySelect.innerHTML = " <option value=''>请选择城市</option>";
        }
    }


</script>

</html>